本篇以

• GET 方法串接 JSON 文件內容示例。
• 原生JavaScript、jQuery、Axios 三種寫法供參考。

適用於

• 有基本的 JavaScript 應用能力。
• 知道什麼是 Ajax 。
• 知道透過 API 串接文件的用途。

• 可至政府資料開放平台取得 JSON 格式的 API
• 下列範例印在console裡確認是否串接成功
  

1. XMLHttpRequest

示例

var dataUrl= "https://cloud.culture.tw/frontsite/trans/SearchShowAction.do?method=doFindTypeJ&category=6"
var xhr = new XMLHttpRequest()
xhr.open('GET',dataUrl, true)
xhr.send()
xhr.onload = function(){
    var data = JSON.parse(this.responseText);
    console.log(data);
}

//↑行5可以改成
xhr.onreadystatechange = function(){
    if(this.readyState === 4 && this.status === 200){
        var data = JSON.parse(this.responseText);
            console.log(data);
    }
}

分段說明:

// 1.設一個變數把API的URL存起來
var dataUrl= "API的URL"

// 2.new一個XMLHttpRequest物件(以此物件的方法進行資料請求) 
var xhr = new XMLHttpRequest()

// 3.以GET方法開啟一個請求
//open('Method',API的URL,預設值為true非同步進行)
xhr.open('GET',dataUrl, true)

// 4.送出請求(若為GET參數不填或填null)
xhr.send() 

// 5-1 或直接用 onload => 資料接收/送出成功後執行的function
xhr.onload = function () {
    var data = JSON.parse(this.responseText);
    console.log(data);
}

// 5-2.寫一個function處理狀態改變時(onReadyStateChange)
//   0=執行前    1=讀取中   2=已讀取  3=資訊交換中  4=完成
//   status(HTTP狀態碼):200 正常完成
xhr.onreadystatechange = function(){

    // 如果完成(readyState=4 , 且HTTP狀態正常 status=200)
    if(this.readyState === 4 && this.status === 200){
    
        // 將接回的資料存到變數data
        var data = JSON.parse(this.responseText);
        
        // 6.~~ 應用data(這裡先以console.log確認打回來的資料內容):  
            console.log(data);
    }
}

備註

1. .open('～',～, true/false)

   • true 非同步(預設值)：程式碼不會等資料回傳回來就會繼續執行後續程式碼
   • false 同步：等資料處理（回傳/接收）完畢才繼續往下執行後續程式碼
   • 預設使用非同步的原因:若資料量大時等全部載完才執行後續動作UX很糟(卡在那)

2. JSON.parse

   • JSON格式資料型態是陣列內包物件
   • 資料傳輸時會被轉換成string(字串)
   • 使用JSON.parse將資料轉換回原本的格式（陣列包物件）

2. Axios:

示例

需先安裝Axios,引入CDN:

<script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js'></script>

var dataUrl= "https://cloud.culture.tw/frontsite/trans/SearchShowAction.do?method=doFindTypeJ&category=6"

axios.get(dataUrl)
.then( (res) => {
    console.log(res.data);
})
.catch( (err) => {
    console.log(err);
});

3. jQuery $.Ajax()

示例

需先安裝jQuery,引入CDN:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

var dataUrl= "https://cloud.culture.tw/frontsite/trans/SearchShowAction.do?method=doFindTypeJ&category=6"
$.ajax({
    url: dataUrl,
    method: 'GET',
    dataType: 'json',
    data: '',
    async: true,　
   
    success: res =>{
        console.log(res)
        },
    error: err =>{
        console.log(err)
        },
});

詳解

// 先把API的URL存成一個變數
var dataUrl= "API URL"

$.ajax({
    url: dataUrl,  // 指定API 的 URL 
    method: 'GET', // 指定請求方法
    dataType: 'json',// API的格式
    data: '', //若有傳送資料時的資料設定 (GET沒有)
    async: true,　//  預設是true=非同步,false=同步 (true時整行可省略)

    success: res =>{ // 成功的話執行...
        ...
        },
    error: err =>{ // 失敗的話執行...
        ...
        },
});
// 箭頭涵式寫法:success: res =>{  ....}
// 原始一般寫法:success: function(res){  ....}

備註：

若選擇開放使用的 API 仍出現無法成功取得資料，開啟開發者瀏覽工具查看錯誤訊息，若原因為 CORS (Cross-Origin Resource Sharing 跨來源資源共用 ) 問題，在純練習用時可先透過　cors-anywhere 的應用將 API URL 前面加上 https://cors-anywhere.herokuapp.com/，可暫時避開 CORS 問題，成功完成 GET 請求。

嘿嘿！成功抓到 JSON 資料後的下一步，當然就是將資料內容 Show 在畫面上囉！來到下篇實作栗子吧：Ajax 將取得的 API 資料應用於頁面中 ( 以 JSON 為例 )

參考文件

• XMLHttpRequest|MDN
• axios
• XMLHttpRequest：練習使用簡單的 GET 方法接一個 open data
• Axios：純、手工系列 JS(Vue Axios篇)
• Ajax：「使用網頁等公車」 ─ 從 AJAX 開始的 api 串接之旅
• CORS|MDN
• cors-anywhere

個人 Blog: https://eudora.cc/